<template>
  <div class="app-container">
    <!-- <el-card>
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="父级id" prop="parentId">
          <el-input v-model="queryParams.parentId" placeholder="请输入父级id" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-input v-model="queryParams.level" placeholder="请输入等级" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="编号" prop="code">
          <el-input v-model="queryParams.code" placeholder="请输入编号" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input v-model="queryParams.orderNum" placeholder="请输入排序" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card> -->

    <el-card>
      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
        <el-col :span="6"><span style="font-size: large">填写地配置</span></el-col>
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['wms:address:add']">新增</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="addressList" border row-key="id" class="mt20" empty-text="暂无填写地信息">

        <el-table-column label="填写地名称" prop="name" align="left" />
        <el-table-column label="填写地级别" align="center" show-overflow-tooltip prop="level" width="200">
          <template #default="scope">
            <el-button plain color="#67C23A" v-if="scope.row.level==0">区</el-button>
            <el-button plain color="#E6A23C" v-if="scope.row.level==1">乡镇</el-button>
            <el-button plain color="#F56C6C" v-if="scope.row.level==2">村社区</el-button>

          </template>
        </el-table-column>
        <el-table-column label="编号" prop="code" align="center" />
        <el-table-column label="排序" prop="orderNum" align="center" />
        <el-table-column label="备注" prop="remark" align="center" />
        <el-table-column label="操作" align="center" show-overflow-tooltip class-name="small-padding fixed-width"
          width="220">
          <template #default="scope">
            <el-button type="primary" link icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['wms:itemBrand:add']"
              v-if="scope.row.level!=2">新增</el-button>
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['wms:address:edit']">修改</el-button>
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
              v-hasPermi="['wms:address:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-row>
        <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
      </el-row>

    </el-card>
    <!-- 添加或修改填写地配置对话框 -->
    <el-drawer :title="title" v-model="open" size="40%" append-to-body>
      <el-form ref="addressRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item v-if="sjName" label="上级名称" prop="sjName">
          <el-input disabled v-model="sjName" placeholder="请输入上级名称" />
        </el-form-item>
        <!-- <el-form-item label="父级id" prop="parentId">
          <el-input v-model="form.parentId" placeholder="请输入父级id" />
        </el-form-item> -->
        <!-- <el-form-item label="等级" prop="level">
          <el-input v-model="form.level" disabled placeholder="请输入等级" />
        </el-form-item> -->
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="编号" prop="code">
          <el-input v-model="form.code" placeholder="请输入编号" />
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input v-model="form.orderNum" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup name="Address">
  import {
    listAddress,
    getAddress,
    delAddress,
    addAddress,
    treeselect,
    updateAddress
  } from "@/api/wms/address";

  const {
    proxy
  } = getCurrentInstance();

  const addressList = ref([]);
  const open = ref(false);
  const buttonLoading = ref(false);
  const loading = ref(true);
  const ids = ref([]);
  const total = ref(0);
  const title = ref("");

  const data = reactive({
    sjName: undefined,
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      parentId: undefined,
      level: undefined,
      code: undefined,
      name: undefined,
      orderNum: undefined,
    },
    rules: {
      id: [{
        required: true,
        message: "不能为空",
        trigger: "blur"
      }],
      parentId: [{
        required: true,
        message: "父级id不能为空",
        trigger: "blur"
      }],
      level: [{
        required: true,
        message: "等级不能为空",
        trigger: "blur"
      }],
      code: [{
        required: true,
        message: "编号不能为空",
        trigger: "blur"
      }],
      name: [{
        required: true,
        message: "名称不能为空",
        trigger: "blur"
      }],
      remark: [{
        required: true,
        message: "备注不能为空",
        trigger: "blur"
      }],
      orderNum: [{
        required: true,
        message: "排序不能为空",
        trigger: "blur"
      }],
    }
  });

  const {
    sjName,
    queryParams,
    form,
    rules
  } = toRefs(data);

  /** 查询填写地配置列表 */
  function getList() {
    loading.value = true;
    treeselect(queryParams.value).then(response => {
      addressList.value = response.data;
      total.value = response.total;
      loading.value = false;
    });
  }

  // 取消按钮
  function cancel() {
    open.value = false;
    reset();
  }

  // 表单重置
  function reset() {
    form.value = {
      id: null,
      parentId: null,
      level: null,
      code: null,
      name: null,
      remark: null,
      orderNum: null,
      createBy: null,
      createTime: null,
      updateBy: null,
      updateTime: null
    };
    proxy.resetForm("addressRef");
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }

  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  }

  /** 新增按钮操作 */
  const handleAdd = async (row) => {
    form.value = {}
    open.value = true;
    title.value = "添加填写地";
    if (row.id) {
      form.value.name = undefined
      form.value.code = undefined
      form.value.remark = undefined
      form.value.orderNum = undefined
      form.value.parentId = row.id
      sjName.value = row.name
      form.value.level = Number(row.level) + 1
    } else if (row.id == undefined) {
      form.value.name = undefined
      form.value.code = undefined
      form.value.orderNum = undefined
      sjName.value = undefined
      form.value.remark = undefined
      delete form.value.parentId
      form.value.level = 0
    }
  }

  /** 修改按钮操作 */
  function handleUpdate(row) {
    reset();
    const _id = row.id || ids.value
    getAddress(_id).then(response => {
      form.value = response.data;
      open.value = true;
      title.value = "修改填写地";
    });
  }

  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["addressRef"].validate(valid => {
      if (valid) {
        buttonLoading.value = true;
        if (form.value.id != null) {
          updateAddress(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          }).finally(() => {
            buttonLoading.value = false;
          });
        } else {
          addAddress(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          }).finally(() => {
            buttonLoading.value = false;
          });
        }
      }
    });
  }

  /** 删除按钮操作 */
  function handleDelete(row) {


      if (row.children == undefined) {
        const _ids = row.id;
        proxy.$modal.confirm('是否确认删除填写地配置编号为"' + _ids + '"的数据项？').then(function() {
          loading.value = true;
          return delAddress(_ids);
        }).then(() => {
          loading.value = true;
          getList();
          proxy.$modal.msgSuccess("删除成功");
        }).catch(() => {}).finally(() => {
          loading.value = false;
        });
        // const _ids = data.id;
        // await proxy?.$modal.confirm('确认删除仓库【' + data.warehouseName + '】吗？').finally(() => loading.value = false);
        // await delWarehouse(_ids);
        // proxy?.$modal.msgSuccess("删除成功");
        // await getList();
        // wmsStore.getWarehouseList()
      } else {
        proxy?.$modal.msgWarning('请先删除下级数据');
        return

      }
      console.log(data.children, "00")


    // proxy.$modal.confirm('是否确认删除填写地配置编号为"' + _ids + '"的数据项？').then(function() {
    //   loading.value = true;
    //   return delAddress(_ids);
    // }).then(() => {
    //   loading.value = true;
    //   getList();
    //   proxy.$modal.msgSuccess("删除成功");
    // }).catch(() => {}).finally(() => {
    //   loading.value = false;
    // });
  }

  /** 导出按钮操作 */
  function handleExport() {
    proxy.download('wms/address/export', {
      ...queryParams.value
    }, `address_${new Date().getTime()}.xlsx`)
  }

  getList();
</script>
